import React, { Component } from "react";
import { Select, TreeSelect, Tag } from "antd";
import styles from "./PushTargetCom.less";

const { Option } = Select;

class PushTargetCom extends Component {
  render() {
    const { myLabelList = [] } = this.props;
    return (
      <div className={styles.root}>
        <div>
          {this.props.pushTarget === 1 ? (
            <div
              className={
                this.props.tarGetVisible ? styles.address1 : styles.address
              }
              onClick={
                this.props.selectKey.length <= 0 ? this.props.setVisible : null
              }
            >
              {this.props.selectKey.length <= 0
                ? null
                : this.props.selectKey.map((item, index) => (
                    <Tag
                      closable
                      onClose={() => this.props.onCloseTag(item.key, index)}
                      style={{ marginBottom: 5, marginTop: 5 }}
                      key={item.key}
                    >
                      {item.name}
                    </Tag>
                  ))}
            </div>
          ) : null}
          {this.props.pushTarget === 2 || this.props.pushTarget === "" ? (
            <div style={{ display: "flex", flexDirection: "column" }}>
              <TreeSelect
                treeData={this.props.orgTree}
                treeCheckable
                className={
                  this.props.tarGetVisible ? styles.tree : styles.notEmpty
                }
                value={this.props.depData}
                dropdownStyle={{ maxHeight: 350, overflow: "auto" }}
                // placeholder="请选择推送目标"
                allowClear
                // treeDefaultExpandAll
                onChange={this.props.pushDepart}
                treeCheckStrictly
                disabled={
                  this.props.depDisable && this.props.sceneTemplateId === ""
                }
              />
              {this.props.tarGetVisible ? (
                <span
                  style={{
                    color: "#f5222d",
                    marginBottom: -12,
                    marginTop: -8
                  }}
                >
                  推送目标不能为空
                </span>
              ) : null}
            </div>
          ) : null}
          {this.props.pushTarget === 3 ? (
            <div>
              <Select
                style={{ width: 466 }}
                placeholder="请选择推送渠道"
                disabled
                value={this.props.channel}
              >
                {this.props.channelList.map(item => (
                  <Option
                    value={item.pushChannelId * 1}
                    key={item.pushChannelId}
                  >
                    {item.description}
                  </Option>
                ))}
                {/* <Option value={4}>ADS</Option> */}
              </Select>
            </div>
          ) : null}
          {this.props.pushTarget === 4 ? (
            <div
              className={
                this.props.tarGetVisible ? styles.label1 : styles.label
              }
            >
              <Select
                mode="multiple"
                style={{ width: 466 }}
                placeholder="请选择推送目标"
                onChange={this.props.handleChangeLabel}
                // value={this.props.channel}
              >
                {myLabelList.map(item => (
                  <Option value={item.labelId * 1} key={item.labelId}>
                    {item.labelName}
                  </Option>
                ))}
              </Select>
            </div>
          ) : null}
        </div>
        {this.props.tarGetVisible &&
        (this.props.pushTarget === 1 || this.props.pushTarget === 4) ? (
          <span
            style={{
              color: "#f5222d",
              // marginBottom: -48,
              marginTop: -12
            }}
          >
            推送目标不能为空
          </span>
        ) : null}
      </div>
    );
  }
}

export default PushTargetCom;
